<template>
  <CollapsePanel name="element-continuations">
    <template #header> ElementConditional </template>
    <p>collapse-title :title="$t('panel.continuations')"</p>
  </CollapsePanel>
</template>

<script lang="ts">
  import { computed, defineComponent, onMounted, ref } from 'vue';
  import modeler from '/@/store/modules/bpmnModeler';
  import { CollapsePanel } from 'ant-design-vue';

  import { Base } from 'diagram-js/lib/model';
  import * as CU from '/@/components/BpmnChart/src/components/Panel/bo-utils/conditionUtil';
  import EventEmitter from '/@/utils/bpmn/EventEmitter';

  export default defineComponent({
    name: 'ElementConditional',
    components: { CollapsePanel },
    setup() {
      const modelerStore = modeler();
      const getActive = computed<Base | null>(() => modelerStore.getActive!);

      // 变量配置部分
      const varVisible = ref<boolean>(false);
      const variableName = ref<string | undefined>(undefined);
      const varEventVisible = ref<boolean>(false);
      const variableEvents = ref<string | undefined>(undefined);
      const getElementVariables = () => {
        varVisible.value = CU.isConditionEventDefinition(getActive.value!);
        variableName.value = CU.getVariableNameValue(getActive.value!);
        if (varVisible.value) {
          varEventVisible.value = !CU.isExtendStartEvent(getActive.value!);
          variableEvents.value = CU.getVariableEventsValue(getActive.value!);
        }
      };
      const setElementVariableName = (value: string | undefined) => {
        CU.setVariableNameValue(getActive.value!, value);
      };
      const setElementVariableEvents = (value: string | undefined) => {
        CU.setVariableEventsValue(getActive.value!, value);
      };

      // 条件类型配置部分
      const conditionTypeOptions = ref<Record<string, string>[]>([]);
      const conditionData = ref<ConditionalForm>({});
      const getElementConditionType = () => {
        conditionData.value.conditionType = CU.getConditionTypeValue(getActive.value!);
        conditionData.value.conditionType === 'expression' && getConditionExpression();
        conditionData.value.conditionType === 'script' && getConditionScript();
      };
      const setElementConditionType = (value: string) => {
        CU.setConditionTypeValue(getActive.value!, value);
      };

      const getConditionExpression = () => {
        conditionData.value.expression = CU.getConditionExpressionValue(getActive.value!);
      };
      const setConditionExpression = (value: string | undefined) => {
        CU.setConditionExpressionValue(getActive.value!, value);
      };

      const getConditionScript = () => {
        conditionData.value.language = CU.getConditionScriptLanguageValue(getActive.value!);
        conditionData.value.scriptType = CU.getConditionScriptTypeValue(getActive.value!);
        conditionData.value.body = CU.getConditionScriptBodyValue(getActive.value!);
        conditionData.value.resource = CU.getConditionScriptResourceValue(getActive.value!);
      };
      const setConditionScriptLanguage = (value: string | undefined) => {
        CU.setConditionScriptLanguageValue(getActive.value!, value);
      };
      const setElementConditionScriptType = (value: string | undefined) => {
        CU.setConditionScriptTypeValue(getActive.value!, value);
      };
      const setConditionScriptBody = (value: string | undefined) => {
        CU.setConditionScriptBodyValue(getActive.value!, value);
      };
      const setConditionScriptResource = (value: string | undefined) => {
        CU.setConditionScriptResourceValue(getActive.value!, value);
      };

      onMounted(() => {
        getElementVariables();
        getElementConditionType();
        conditionTypeOptions.value = CU.getConditionTypeOptions(getActive.value!);
        EventEmitter.on('element-update', () => {
          conditionTypeOptions.value = CU.getConditionTypeOptions(getActive.value!);
          getElementVariables();
          getElementConditionType();
        });
      });

      return {
        varVisible,
        varEventVisible,
        variableName,
        variableEvents,
        setElementVariableName,
        setElementVariableEvents,
        conditionTypeOptions,
        conditionData,
        // scriptTypeOptions,
        setElementConditionType,
        setConditionExpression,
        setConditionScriptLanguage,
        setElementConditionScriptType,
        setConditionScriptBody,
        setConditionScriptResource,
      };
    },
  });
</script>
